<template>
    <div>
        <div class="Top" v-if="show">
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
                <el-form-item label="客户订单号" prop="cOrder">
                    <el-input v-model="formInline.cOrder" placeholder="请输入客户订单号"></el-input>
                </el-form-item>
                <el-form-item label="送货方式" prop="method">
                    <el-select v-model="formInline.method" placeholder="请输入送货方式">
                        <el-option v-for="item in options" :key="item.method" :label="item.label" :value="item.method"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="快递单号" prop="express">
                    <el-input v-model="formInline.express" placeholder="请输入快递单号"></el-input>
                </el-form-item>
                <el-form-item label="订单来源" prop="source">
                    <el-select v-model="formInline.source" placeholder="请输入订单来源">
                        <el-option v-for="item in option" :key="item.source" :label="item.label" :value="item.source"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
                    <el-button @click="Reset('formInline')" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
                <div class="Newexportsearchrefresh">
            <el-button type="warning" plain icon="el-icon-download">导出</el-button>
                            <div class="Searchrefresh">
                    <el-tooltip placement="top">
                        <div slot="content">{{ disabled ? '显示搜索' : '隐藏搜索' }}</div>
                        <el-button icon="el-icon-search" circle @click="Showorhide()"> </el-button>
                    </el-tooltip>
                    <el-tooltip content="刷新" placement="top">
                        <el-button icon="el-icon-refresh-left" circle @click="Reset()"></el-button>
                    </el-tooltip>
                </div>
        </div>
        <!-- 页面渲染 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180"> </el-table-column>
            <el-table-column prop="cOrder" label="客户订单号" width="180"> </el-table-column>
            <el-table-column prop="method" label="送货方式"> </el-table-column>
            <el-table-column prop="arrive" label="出货时间"> </el-table-column>
            <el-table-column prop="source" label="订单来源"> </el-table-column>
            <el-table-column prop="express" label="快递单号"> </el-table-column>
            <el-table-column prop="belongName" label="收货人"> </el-table-column>
            <el-table-column prop="status" label="订单状态">
                <template slot-scope="scope">
                    {{ scope.row.status == 2 ? '审核未通过' : scope.row.status == 1 ? '通过' : '审核中' }}
                </template>
            </el-table-column>
            <el-table-column prop="plate" label="备注"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="260">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="see(scope.row)">查看货品</el-button>
                    <el-button type="text" size="small" @click="toexamine(scope.row)">审核</el-button>
                    <el-button type="text" size="small" @click="Administrative(scope.row.id)">管理费用项</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
            style="float:right;"
            background
            v-if="hid"
                @size-change="handleSizeChang"
                @current-change="handleCurrentChang"
                :current-page="formInline.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="formInline.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 修改弹窗 -->
        <div class="dialbox">
        <el-dialog title="修改出库订单" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="订单号" :label-width="formLabelWidth">
                    <el-input v-model="form.cOrder" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="送货方式" :label-width="formLabelWidth">
                    <el-select v-model="form.method" placeholder="请输入送货方式" style="width:100%">
                        <el-option v-for="item in options" :key="item.method" :label="item.label" :value="item.method"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出货时间" :label-width="formLabelWidth" >
                    <el-date-picker v-model="form.arrive" type="date" style="width:100%" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
                </el-form-item>
                <el-form-item label="订单来源" :label-width="formLabelWidth">
                    <el-select v-model="form.source" placeholder="请输入订单来源" style="width:100%">
                        <el-option v-for="item in option" :key="item.source" :label="item.label" :value="item.source"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="快递单号" :label-width="formLabelWidth">
                    <el-input v-model="form.express" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.plate" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="收货人" :label-width="formLabelWidth">
                    <el-select v-model="form.cId" placeholder="请输入收货人" style="width:100%">
                        <el-option v-for="item in optione" :key="item.sId" :label="item.name" :value="item.sId"> </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="modify">确 定</el-button>
            </div>
        </el-dialog>
        </div>
        <!-- 审核 -->
        <el-dialog title="出库订单" :visible.sync="dialogTableVisible">
            <el-descriptions title="运单信息" :column="3" border>
                <el-descriptions-item label="送货方式">{{ Auditlist.method }}</el-descriptions-item>
                <el-descriptions-item label="预计到货时间">{{ Auditlist.arrive }}</el-descriptions-item>
                <el-descriptions-item label="客户订单号">{{ Auditlist.cOrder }}</el-descriptions-item>
                <el-descriptions-item label="车船牌号">
                    {{ Auditlist.plate }}
                </el-descriptions-item>
                <el-descriptions-item label="快递单号" :contentStyle="{ 'text-align': 'left' }">{{
                    Auditlist.express
                }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="我方应付费用项" :column="3" border>
                <el-descriptions-item label="托运费">{{ Auditlist.cost[0].mnumber }}</el-descriptions-item>
                <el-descriptions-item label="停车费">{{ Auditlist.cost[1].mnumber }}</el-descriptions-item>
                <el-descriptions-item label="地面服务费">{{ Auditlist.cost[2].mnumber }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="货主应付费用项" :column="3" border>
                <el-descriptions-item label="托运费">{{ Auditlist.cost[0].hnumber }}</el-descriptions-item>
                <el-descriptions-item label="停车费">{{ Auditlist.cost[1].hnumber }}</el-descriptions-item>
                <el-descriptions-item label="地面服务费">{{ Auditlist.cost[2].hnumber }}</el-descriptions-item>
            </el-descriptions>
            <el-table :data="Warehousinglist" style="width: 100%">
                <el-table-column type="index" label="序号" width="50"> </el-table-column>
                <el-table-column prop="product.number" label="货品编号" width="180"> </el-table-column>
                <el-table-column prop="product.name" label="货品名称"> </el-table-column>
                <el-table-column prop="stock" label="订单数量" width="150"> </el-table-column>
                <el-table-column prop="realStock" label="入库数量" width="150"> </el-table-column>
                <el-table-column prop="product.spec" label="规格" width="150"> </el-table-column>
                <el-table-column prop="product.code" label="条码"> </el-table-column>
                <el-table-column prop="product.brand" label="品牌"> </el-table-column>
                <el-table-column prop="product.shelvesName" label="货架"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClic(scope.row.infoId)" type="text" size="small">入库数量</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                style="float:right;"
            background
            v-if="hide"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="WarehousingPagination.pageNum"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="WarehousingPagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tatal"
                >
                </el-pagination>
            </div>
            <div style="display:flex; justify-content:flex-end;width:100%;margin-top: 30px;">
            <el-button type="primary" @click="adopt" size="medium">通过</el-button>
            <el-button type="danger" @click="refuse" size="medium">拒绝</el-button>
            </div>
        </el-dialog>
        <!-- 管理费用项 -->
        <div class="logbox" >
        <el-dialog title="管理费用项" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-table :data="gridData">
                <el-table-column property="name" label="项目名称" width="150"></el-table-column>
                <el-table-column property="mnumber" label="我方应付" width="150">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.mnumber"></el-input>
                    </template>
                </el-table-column>
                <el-table-column property="hnumber" label="货主应付">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.hnumber"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <div style="height:50px; display: flex;
    justify-content:flex-end;
    align-items:center;">
            <el-button  @click="management">确 定</el-button>
            </div>
        </el-dialog>
        </div>
    </div>
</template>

<script>
import {
    Issueorderlist,
    Consigneedetails,
    Issuemodification,
    Commodityconf,
    Issueconfirmed,
    Issuerejected,
    Issuemanag,
    Modifyissuess,
    Issuedeletion
} from '@/api/user';
export default {
    data() {
        return {
            // 搜索框表单
            formInline: {
                pageNum: 1,
                pageSize: 10
            },
            // 运货方式
            options: [
                {
                    method: 0,
                    label: '汽车'
                },
                {
                    method: 1,
                    label: '船运'
                },
                {
                    method: 2,
                    label: '自提'
                },
                {
                    method: 3,
                    label: '火车'
                },
                {
                    method: 4,
                    label: '零担'
                },
                {
                    method: 5,
                    label: '专车'
                },
                {
                    method: 6,
                    label: '快递'
                }
            ],
            // 订单来源
            option: [
                {
                    source: 0,
                    label: '淘宝'
                },
                {
                    source: 1,
                    label: '拼多多'
                }
            ],
            // 页面渲染
            tableData: [],
            // 页面渲染总条目数
            total: undefined,
            // 修改表单
            form: {},
            // 收货人
            optione: [],
            // 修改弹窗
            dialogFormVisible: false,
            // 审核
            WarehousingPagination: {
                pageNum: 1,
                pageSize: 10
            },
            // 审核拒绝
            Fail: {},
            // 审核列表
            Auditlist: {
                cost: [
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    }
                ]
            },
            // 审核弹窗
            dialogTableVisible: false,
            // 出库数据
            Warehousinglist: [],
            // 出库数据总条目数
            tatal: undefined,
            // 管理费用项弹窗
            dialogVisible: false,
            // 管理费用项
            gridData: [],
            grdData: [],
            disabled: false,
            show: true,
            formLabelWidth: '120px',
            hide:false,
            hid:false

        };
    },
    methods: {
        // 搜索
        search() {
            Issueorderlist(this.formInline).then((ref) => {
                // console.log(ref);
                this.tableData = ref.rows;
                this.total = ref.total;
                this.hid = true
            });
        },
        // 页面数据分页
        handleSizeChang(val) {
            this.formInline.pageSize = Number(val);
            this.search();
        },
        // 页面数据分页（页数）
        handleCurrentChang(val) {
            this.formInline.pageNum = Number(val);
            this.search();
        },
        // 修改弹窗
        handleClick(val) {
            this.dialogFormVisible = true;
            this.form = val;
        },
        // 收货人
        consignee() {
            Consigneedetails().then((ref) => {
                this.optione = ref.rows;
            });
        },
        // 修改确认
        modify() {
            this.dialogFormVisible = false;
            Issuemodification(this.form).then((ref) => {
                console.log(ref);
                this.search();
            });
        },
        // 审核
        toexamine(val) {
            // this.ooo.oId = val.id
            this.WarehousingPagination.oId = val.id;
            this.Fail.id = val.id;
            this.Auditlist = val;
            this.dialogTableVisible = true;
            if (this.Auditlist.cost) {
                this.Auditlist.cost = eval(this.Auditlist.cost);
            } else {
                this.Auditlist.cost = [
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    },
                    {
                        mnumber: '0',
                        hnumber: '0'
                    }
                ];
            }
            this.sh();
        },
        adopt() {
            this.$confirm('确定通过审核吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                Issueconfirmed(this.WarehousingPagination.oId).then((ref) => {
                    console.log(ref);
                    this.dialogTableVisible = false;
                    this.search();
                    this.$message({
                        type: 'success',
                        message: '审核成功'
                    });
                });
            });
        },
        // 出库审核拒绝
        refuse() {
            this.Fail.status = 2;
            Issuerejected(this.Fail).then((ref) => {
                console.log(ref);
                this.dialogTableVisible = false;
            });
        },
        // 审核数据
        sh() {
            Commodityconf(this.WarehousingPagination).then((ref) => {
                // console.log(ref);
                this.Warehousinglist = ref.rows;
                this.tatal = ref.total;
                this.hide=true
            });
        },
        // 分页（多少个）
        handleSizeChange(val) {
            this.WarehousingPagination.pageSize = Number(val);
            this.sh();
        },
        // 分页（页数）
        handleCurrentChange(val) {
            this.WarehousingPagination.pageNum = Number(val);
            this.sh();
        },
        // 管理费用项
        Administrative(val) {
            Issuemanag(val).then((ref) => {
                // console.log(ref.data.cost);
                this.grdData = ref.data;
                if (this.grdData.cost == '') {
                    this.gridData = [
                        {
                            name: '托运费',
                            mnumber: '0',
                            hnumber: '0'
                        },
                        {
                            name: '停车费',
                            mnumber: '0',
                            hnumber: '0'
                        },
                        {
                            name: '地面服务费',
                            mnumber: '0',
                            hnumber: '0'
                        }
                    ];
                } else {
                    this.gridData = JSON.parse(this.grdData.cost);
                }

                // console.log(this.gridData);
                this.dialogVisible = true;
            });
        },
        // 修改管理费用
        management() {
            this.grdData.cost = JSON.stringify(this.gridData);
            // console.log(this.grdData);
            this.dialogVisible = false;
            Modifyissuess(this.grdData).then((ref) => {
                console.log(ref);
                this.search();
            });
        },
        // 管理费用项弹窗关闭
        handleClose(done) {
            done();
        },
        //   删除
        del(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                Issuedeletion(id).then((ref) => {
                    this.search();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                });
            });
        },
        // 查看货品
        see(val) {
            // console.log(val);
            this.$router.push({
                path: '/Ex',
                query: {
                    val
                }
            });
        },
            // 显示隐藏
        Showorhide() {
            (this.show = !this.show), (this.disabled = !this.disabled);
        },
        // 重置
        Reset(){
            this.$refs.formInline.resetFields();
            this.search()
        }
    },
    mounted() {
        // 搜索
        this.search();
        // 收货人
        this.consignee();
    }
};
</script>

<style lang="less" scoped>
/deep/.el-form--inline .el-form-item__label {
    font-weight: 700;
}
.Newexportsearchrefresh {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.dialbox /deep/.el-dialog{
    width: 35% !important;
}
/deep/.el-dialog{
    width: 80% !important;
}
/deep/.el-descriptions{
    margin-bottom: 20px;
}
.block{
    height: 40px;
    margin-top: 10px;
}
.logbox /deep/.el-dialog{
    width: 30% !important;
}
</style>